<!--
 * @Author: 闫一丹 1437921153@qq.com
 * @Date: 2022-12-22 22:37:07
 * @LastEditors: 闫一丹 1437921153@qq.com
 * @LastEditTime: 2023-01-01 11:43:02
 * @FilePath: \vue-xuexitong\src\views\Directory.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref } from "vue";
// 引入路由
import { useRouter } from "vue-router";
import { onMounted, computed ,nextTick} from 'vue'
import { storeToRefs } from 'pinia'
import { myFriendsStore } from '@/stores/friends'

// 实例化路由
const router = useRouter();
// 实例化仓库
const friendsStore = myFriendsStore()
// 解构
const { getuserMsgFirst } = friendsStore
const { firstCharac } = storeToRefs(friendsStore)

const onClickLeft = () => history.back();
const onClickRight = () => showToast("按钮");
const value = ref("");
const people_item = ref([
  {
    id: 0,
    name: "闫一丹",
  },
  {
    id: 1,
    name: "闫一丹",
  },
  {
    id: 2,
    name: "闫一丹",
  },
]);
// function onClickLeft() {}
// function onClickRight() {}

// 跳转到PeopleHome页面
const goPeopleHome = () => {
  router.push("/peoplehome");
};
// 跳转至群聊页面
const tochatAll = () => {
  router.push("/chatall");
};
let sortFirst = ref({})
onMounted(async () => {
  try {
    await getuserMsgFirst()
    // console.log(firstCharac.value, '333');
    // const sortPinyin =firstCharac.value.map((item)=>item.pinyin).sort()
    // console.log(sortPinyin,'排序');
    // const sortName = firstCharac.value.find((item)=>{})
    // console.log(sortName,'名字');
    console.log(3333);
    
     sortFirst = computed(() => {
      const sortedNames = firstCharac.value.map((item) => item.pinyin).sort()
      console.log(sortedNames, 'names');
      return sortedNames.map((pinyin) => {
        const { user_name } = firstCharac.value.find((item) => item.pinyin === pinyin)
        return { pinyin, user_name }
      })
    })
    await nextTick()
    console.log(sortFirst.value, 'hhaha');

  } catch (error) {
    return Promise.reject(error)
  }
})

// 首字母数组
let firstLetter = firstCharac.pinyin
// 定义一个数组存放排序后的信息
const name = ref([])

// 排序方法

// 遍历存放


</script>

<template>
  <div>
    <!-- 头部导航 -->
    <header>
      <van-nav-bar title="通讯录" right-text="新建团队" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    </header>

    <main>
      <!-- 搜索框 -->
      <van-search v-model="value" placeholder="搜索" shape="round" background="#fff" input-align="center" />
      <!-- 通讯列表 -->
      <div class="title_qunliao title">群聊</div>
      <van-cell title="我加入的群聊" is-link @click="tochatAll" />
      <div class="title_lianxiren title">联系人</div>

      <div class="lianxiren">
        <div class="people_card" v-for="(pinyin, user_name) in sortFirst" :key="pinyin" @click="goPeopleHome">
          <h5 class="title">{{ pinyin.pinyin }}</h5>
          <img src="/images/people.png" alt="" />
          <span>{{ pinyin.user_name }}</span>
        </div>
      </div>
    </main>
  </div>
</template>
<style lang="less">
div {
  /* background-color: #f5f6f8; */
}

* {
  margin: 0;
  padding: 0;
}

main {
  background-color: #f5f6f8;
}

.title {
  padding-left: 16px;
  font-size: 12px;
  color: grey;
}

.title_qunliao {
  padding-top: 20px;
}

.title_lianxiren {
  padding-top: 8px;
  padding-bottom: 8px;
}

.people_card {
  height: 100px;
  background-color: #fff;

  h5 {
    padding-top: 10px;
    font-size: 14px;
  }

  img {
    width: 50px;
    margin: 16px;
    vertical-align: middle;
  }
}

.van-nav-bar__content {
  border-bottom: 1px solid #eeeeee;
}

.van-icon-search:before {
  text-align: center;
  size: 18px;
}

.van-icon-arrow-left:before {
  color: black;
}
</style>

